<template>
  <div class="index-home">
    <div v-if="RoleGroup<=2">
      <span class="wrapperTitle">概况统计</span>
      <header style="border-bottom: 1px solid #e6e6e6">
        试验类型
        <el-select
          @change="changeType"
          v-model="testType"
          placeholder="请选择"
          clearable
          style="width: 200px;margin:10px 0% 10px 30px;"
        >
          <el-option label="预试验" value="0"></el-option>
          <el-option label="正式试验" value="1"></el-option>
          <el-option label="预试验+正式试验" value></el-option>
        </el-select>
      </header>
      <header>研究对象分布情况</header>
      <div class="div-echarts">
        <ul class="clearfix">
          <li>
            <div class="sys-body">
              <echarts :options="chartsInfo2" chartId="infoChart2"></echarts>
            </div>
          </li>
          <li>
            <div class="sys-body">
              <echarts :options="chartsInfo3" chartId="infoChart3"></echarts>
            </div>
          </li>
        </ul>
      </div>
      <header style="position: relative">
        研究对象入组情况
        <div class="positionDiv">
          <ul class="clearfix">
            <li
              v-for="(item,index) in dateArray"
              :key="index"
              @click="changeDate(index)"
              :class="{active:activeName==index}"
            >
              <span>{{item}}</span>
            </li>
          </ul>
        </div>
      </header>
      <div class="div-echarts">
        <div class="sys-body">
          <echarts :options="chartsInfo6" chartId="infoChart6"></echarts>
        </div>
      </div>
      <header>
        研究对象入组社区分布
        <el-select
          @change="changeDis"
          v-model="districtNo"
          placeholder="请选择地区"
          clearable
          style="width: 300px;margin:10px 2% 10px 30px;"
        >
          <el-option
            v-for="item in optionDiq"
            :key="item.DistrictName"
            :label="item.DistrictName"
            :value="item.DistrictNo"
          ></el-option>
        </el-select>
      </header>
      <div class="div-echarts clearfix">
        <div class="sys-body">
          <echarts :options="chartsInfo4" chartId="infoChart4"></echarts>
        </div>
      </div>
    </div>
    <div class="div-table">
      <p class="p1">
        <b class="wrapperTitle" style="margin-left:0px">我的消息</b>
        <el-select
          @change="changeReadState"
          v-model="readState"
          placeholder="请选择"
          clearable
          style="width: 120px;margin:10px 0% 10px 30px;"
        >
          <el-option label="全部" value></el-option>
          <el-option label="未阅读" value="1"></el-option>
          <el-option label="已阅读" value="2"></el-option>
        </el-select>
        <span @click="allRead">全部已读</span>
      </p>

      <!---->
      <template>
        <el-table
          :data="tableData"
          border
          v-loading="loading"
          element-loading-text="加载中"
          style="width: 100%"
        >
          <el-table-column
            prop="MessageTitle"
            header-align="center"
            align="left"
            label="主题"
            min-width="400"
          ></el-table-column>
          <el-table-column prop="SendTime" align="center" label="发送时间" min-width="100"></el-table-column>
          <el-table-column
            prop="ReadState"
            align="center"
            :formatter="ReadState"
            label="状态"
            min-width="100"
          ></el-table-column>
          <el-table-column min-width="100" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                v-if="scope.row.MessageType==3"
                type="text"
                label="查看"
                @click="handleHcp(scope.$index, scope.row)"
              >查看</el-button>
              <el-button
                size="small"
                v-else-if="scope.row.MessageType==2"
                type="text"
                label="查看"
                @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--分页-->
      <div class="block mg-20-auto">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageId"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "./echarts.vue"; //引入echart文件，服务端注入货截流
import { mapGetters } from "vuex";
var data2 = "";
var data3 = "";
var data6 = [];
export default {
  components: {
    echarts,
  },
  computed: {
    ...mapGetters(["token", "RoleGroup"]),
  },
  data() {
    return {
      loading: true,
      tableData: [],
      testType: "",
      readState: "",
      dateArray: ["天", "周", "月", "年"],
      pageId: 1,
      total: null,
      optionDiq: [],
      activeName: null,
      loading: false,
      districtNo: "310104",
      pageSize: 10,
      chartsInfo2: {
        title: {
          text: "研究对象人数",
          x: "48%",
          y: "60%",
          textStyle: {
            fontSize: "15",
            color: "#333333",
          },
        },
        color: ["#97ccf6", "#fbb2cf", "#FFCC66"],
        tooltip: {
          trigger: "item",
          // formatter: "{b} : {c} ({d}.percent.toFixed(1)+%)"
          formatter: function (data) {
            return data.name + ":" + data.percent.toFixed(1) + "%";
          },
        },
        legend: {
          x: "48%",
          y: "68%",
          orient: "vertical",
          data: ["孕前期", "怀孕期", "儿童期"],
          formatter: function (name) {
            let index = 0;
            let num = 0;
            let percen = "";
            data2.forEach(function (value, i) {
              num += value.value;
              if (value.name == name) {
                index = i;
                percen = value.value;
              }
            });
            return (
              name +
              " " +
              data2[index].value +
              "    " +
              "(" +
              ((percen / num) * 100).toFixed(1) +
              "%" +
              ")"
            );
          },
        },
        series: [
          {
            name: "研究对象人数",
            type: "pie",
            radius: "90px",
            center: ["62%", "30%"],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                label: {
                  show: false, //隐藏标示文字
                },
                labelLine: {
                  show: false, //隐藏标示线
                },
              },
            },
          },
        ],
      },
      chartsInfo3: {
        title: {
          text: "研究对象人数",
          x: "32%",
          y: "60%",
          textStyle: {
            fontSize: "15",
            color: "#333333",
          },
        },
        color: ["#D0D1D2", "#f1c210"],
        tooltip: {
          trigger: "item",
          formatter: function (data) {
            return data.name + ":" + data.percent.toFixed(1) + "%";
          },
        },
        legend: {
          x: "32%",
          y: "68%",
          orient: "vertical",
          data: ["A", "B"],
          formatter: function (name) {
            let index = 0;
            let num = 0;
            let percen = "";
            data3.forEach(function (value, i) {
              num += value.value;
              if (value.name == name) {
                index = i;
                percen = value.value;
              }
            });
            return (
              name +
              " " +
              data3[index].value +
              "    " +
              "(" +
              ((percen / num) * 100).toFixed(1) +
              "%" +
              ")"
            );
          },
        },
        series: [
          {
            name: "研究对象人数",
            type: "pie",
            radius: "90px",
            center: ["45%", "30%"],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                label: {
                  show: false, //隐藏标示文字
                },
                labelLine: {
                  show: false, //隐藏标示线
                },
              },
            },
          },
        ],
      },
      chartsInfo4: {
        //社区
        color: ["#04BBBF"],
        tooltip: {
          trigger: "item",
          formatter: "社区{b} : {c}(人)",
        },
        legend: {
          orient: "horizontal",
          x: "90%",
          y: "top",
          data: ["怀孕期", "孕前期"],
        },
        xAxis: {
          type: "category",
          name: "社区",
          nameLocation: "end",
          position: "bottom",
          nameGap: "30",
          data: [],
        },
        grid: {
          left: "3%",
          right: "8%",
          bottom: "10%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          name: "人数",
        },
        series: [
          {
            name: "怀孕期",
            type: "bar",
            stack: "sum",
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                },
                color: "#fbb2cf",
              },
            },
            data: [],
          },
          {
            name: "孕前期",
            type: "bar",
            stack: "sum",
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                },
                color: "#97ccf6",
              },
            },
            data: [],
          },
        ],
      },
      ///
      chartsInfo6: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        calculable: false,
        dataZoom: [
          {
            show: true,
            start: 60,
            end: 100,
          },
          {
            type: "inside",
            start: 60,
            end: 100,
          },
        ],
        legend: {
          orient: "horizontal",
          x: "90%",
          y: "top",
          data: ["怀孕期", "孕前期"],
        },

        grid: {
          left: "3%",
          right: "8%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            rotate: 45, //刻度旋转45度角
            textStyle: {
              color: "#333333",
              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: "value",
          name: "人数",
        },
        series: [
          {
            name: "怀孕期",
            type: "bar",
            stack: "sum",
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                },
                color: "#fbb2cf",
              },
            },
            data: [],
          },
          {
            name: "孕前期",
            type: "bar",
            stack: "sum",
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                },
                color: "#97ccf6",
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    ReadState: function (row, column, cellValue, index) {
      return cellValue == 1 ? "未阅读" : "已阅读";
    },
    GetCommunityDistrict: function () {
      //获取社区行政区
      let that = this;
      that
        .service({
          url: "/Dic/GetCommunityDistrict",
          method: "get",
          params: {},
        })
        .then((response) => {
          that.optionDiq = response.dtData;
        })
        .catch((data) => {});
    },
    changeDis: function () {
      this.GetIndexDate();
    },
    changeType(val) {
      let that = this;
      that.GetIndexDate();
      that.GetFeedbackMessage();
      that.GetCommunityDistrict();
      $(function () {
        that.changeDate(0);
      });
    },
    changeDate: function (index) {
      let that = this;
      that.activeName = index;
      that
        .service({
          url: "/ResearchObject/GetUserByDate",
          method: "get",
          params: {
            dateType: index + 1,
            testType: that.testType,
          },
        })
        .then((response) => {
          let arrForm = response.dtData;
          let arrPerone = [],
            arrPertwo = [],
            arrDate = [];
          for (let item of arrForm) {
            arrPerone.push(item.Period1Count); //孕前
            arrPertwo.push(item.Period2Count); //怀孕
            arrDate.push(item.ConfirrmTime); //时间
          }
          that.chartsInfo6.xAxis.data = arrDate;
          that.chartsInfo6.series[0].data = arrPertwo;
          that.chartsInfo6.series[1].data = arrPerone;
        })
        .catch((data) => {});
    },
    GetIndexDate: function () {
      let that = this;
      that
        .service({
          //研究对象
          url: "/ResearchObject/GetIndexData",
          method: "get",
          params: {
            testType: that.testType,
          },
        })
        .then((response) => {
          let dataRow = response.dtData[0];
          console.log(dataRow);
          that.chartsInfo2.series[0].data = [
            { value: dataRow.ObjectPeriod1, name: "孕前期" },
            { value: dataRow.ObjectPeriod2, name: "怀孕期" },
            { value: dataRow.ObjectPeriod3, name: "儿童期" },
          ];
          data2 = that.chartsInfo2.series[0].data;
          that.chartsInfo2.title.text =
            "研究对象人数   " + "" + dataRow.ObjectTotalCount;
          //
          that.chartsInfo3.series[0].data = [
            { value: dataRow.ACount, name: "A" },
            { value: dataRow.BCount, name: "B" },
          ];
          data3 = that.chartsInfo3.series[0].data;
          that.chartsInfo3.title.text =
            "研究对象人数   " + "" + dataRow.ObjectTotalCount;
          //
        })
        .catch((data) => {});
      //社区
      that
        .service({
          url: "/ResearchObject/GetUserCountByCommunity",
          method: "get",
          params: {
            districtNo: that.districtNo,
            testType: that.testType,
            startDate: "",
            endDate: "",
          },
        })
        .then((response) => {
          let arrForm = response.dtData;
          let arrName = [],
            arrData = [];
          let arrPerone = [],
            arrPertwo = [];
          for (let item of arrForm) {
            arrPerone.push(item.Period1Count); //孕前
            arrPertwo.push(item.Period2Count); //怀孕
            arrName.push(item.CName);
            arrData.push(item.UserCount);
          }
          that.chartsInfo4.xAxis.data = arrName;
          that.chartsInfo4.series[0].data = arrPertwo;
          that.chartsInfo4.series[1].data = arrPerone;
        })
        .catch((data) => {});
    },
    handleSizeChange(val) {
      //条数改变
      this.pageSize = val;
      this.GetFeedbackMessage();
    },
    handleCurrentChange(val) {
      //页数改变
      this.pageId = val;
      this.GetFeedbackMessage();
    },
    handleEdit: function (index, row) {
      //查看
      let that = this;
      that
        .service({
          url:
            "/Message/ReadFeedbackMessage?sysId=" +
            row.SYS_ID +
            "&adminId=" +
            that.token +
            "&readState=2",
          method: "post",
        })
        .then((response) => {
          row.ReadState = 2;
        })
        .catch((data) => {});
				
				if (row.MessageType == 2) {
				  that.$router.push({
				    path: "/participant/editor",
				    query: {
				      id: row.ResearchObjectId,
				      mobile: "",
				      researchNo: "",
				      isOther: 2,
				    },
				  });
				}
    },
    handleHcp(index, row) {
      let that = this;
      if (row.MessageType == 3) {
        that.$router.push({
          path: "/participant/list",
          query: {},
        });
      }
      that
        .service({
          url:
            "/Message/ReadFeedbackMessage?sysId=" +
            row.SYS_ID +
            "&adminId=" +
            that.token +
            "&readState=2",
          method: "post",
        })
        .then((response) => {
          row.ReadState = 2;
        })
        .catch((data) => {});
    },
    allRead: function () {
      //设置全部已读
      let that = this;
      that
        .$confirm("将所有消息设置为已阅状态, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that
            .service({
              url:
                "/Message/ReadFeedbackMessage?sysId=" +
                "" +
                "&adminId=" +
                that.token +
                "&readState=2",
              method: "post",
            })
            .then((response) => {
              that.GetFeedbackMessage();
            })
            .catch((data) => {});
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    changeReadState(value) {
      this.pageId = 1;
      this.GetFeedbackMessage();
    },
    GetFeedbackMessage: function () {
      //获取消息记录
      let that = this;
      that
        .service({
          url: "/Message/GetFeedbackMessage",
          method: "get",
          params: {
            sysId:that.token,
            pageCount: that.pageId - 1,
            pageSize: that.pageSize,
            readState: that.readState,
          },
        })
        .then((response) => {
          console.log(response);
          that.tableData = response.dtData;
          that.total = parseInt(response.dtData[0].TotalCount);
          if(response.dtData[0] && response.dtData[0].NewMessageCount >0){
            that.$store.commit('SET_INFORNEWS',true)
          }
        })
        .catch((data) => {});
    },
  },
  mounted: function () {
    let that = this;
    that.GetIndexDate();
    that.GetFeedbackMessage();
    that.GetCommunityDistrict();
    $(function () {
      that.changeDate(0);
    });
  },
  created() {},
};
</script>
<style scoped lang="scss">
.wrapperTitle {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 30px;
  font-weight: bolder;
  font-size: 18px;
  color: #333;
}
.index-home {
  header {
    padding: 20px 40px;
    padding-left: 40px;
  }
  .div-echarts {
    ul {
      li {
        float: left;
        width: 45%;
        text-align: center;
        margin: 20px 2.5%;
      }
    }
  }
  .div-table {
    padding: 20px;
    .p1 {
      padding-left: 0px;
      color: #333;
      margin-bottom: 15px;
      span {
        cursor: pointer;
        color: #0066ff;
        padding-left: 20px;
      }
    }
  }
}
.positionDiv {
  position: absolute;
  top: 100%;
  left: 45%;
  ul {
    li {
      float: left;
      width: 50px;
      border: 1px solid #ccc;
      margin: 0 1px;
      text-align: center;
      border-radius: 6px;
      padding: 3px 0px;
      cursor: pointer;
      span {
      }
    }
    .active {
      background: #0099ff;
      color: #fff;
    }
  }
}
</style>
